<template>
  <view class="ucenter">
    <view class="ucenter-header">
      <image
        src="/static/images/ucenter/header.jpg"
        mode="scaleToFill"
      />
      <view class="ucenter-header-container">
        <view class="avatar">
          <image
            src="/static/images/avatar.png"
            mode="scaleToFill"
          />
        </view>

        <view class="name">
          <view v-if="user && user.username">
            {{ user.username }}
          </view>
          <view
            v-else
            @click="toLogin"
          >
            未登录，点击这里登录
          </view>
        </view>

        <view
          class="statusbar"
          v-if="user.username"
        >
          <view class="statusbar-item">
            <view class="text-xs">关注</view>
            <view class="text-primary text-xs">0</view>
          </view>
          <view class="statusbar-item">
            <view class="text-xs">粉丝</view>
            <view class="text-primary text-xs">0</view>
          </view>
          <view class="statusbar-item">
            <view class="text-xs">作品</view>
            <view class="text-primary text-xs">0</view>
          </view>
        </view>
        <view
          v-else
          class="statusbar-fix"
        ></view>
      </view>
    </view>
    <view class="container">
      <view
        class="vip-card"
        data-to="/pages/ucenter/vip"
        @click="toMenuLink"
      >
        <div class="vip-card-icon"><text class="iconfont icon-round-star"></text></div>
        <div class="vip-card-content">
          <view class="vip-card-title">VIP会员专区</view>
          <view class="vip-card-desc">开通即享会员权益</view>
        </div>
        <view class="vip-card-btn">开通VIP</view>
      </view>
      <view class="ucenter-menu mt-20">
        <view
          class="ucenter-menu-item"
          data-to="/pages/ucenter/paint"
          @click="toMenuLink"
        >
          <view>
            <text class="iconfont icon-file-common-filling"></text>
            我的作品
          </view>
          <text class="iconfont icon-arrow-right-bold"></text>
        </view>

        <view class="ucenter-menu-item">
          <view
            data-to="/pages/ucenter/profile"
            @click="toMenuLink"
          >
            <text class="iconfont icon-setting-filling"></text>
            个人信息
          </view>
          <text class="iconfont icon-arrow-right-bold"></text>
        </view>
        <view
          class="ucenter-menu-item"
          data-to="/pages/ucenter/about"
          @click="goTo"
        >
          <view>
            <text class="iconfont icon-prompt-filling"></text>
            关于我们</view
          >
          <text class="iconfont icon-arrow-right-bold"></text>
        </view>
        <view
          class="ucenter-menu-item"
          data-to="/pages/ucenter/help"
          @click="goTo"
        >
          <view>
            <text class="iconfont icon-help-filling"></text>
            帮助中心</view
          >
          <text class="iconfont icon-arrow-right-bold"></text>
        </view>

        <view
          class="ucenter-menu-item"
          data-to="/pages/ucenter/privacy"
          @click="goTo"
        >
          <view>
            <text class="iconfont icon-warning-filling"></text>
            隐私政策</view
          >
          <text class="iconfont icon-arrow-right-bold"></text>
        </view>

        <view
          class="ucenter-menu-item"
          @click="toContact"
        >
          <view>
            <text class="iconfont icon-private-talk2"></text>
            联系客服</view
          >
          <text class="iconfont icon-arrow-right-bold"></text>
        </view>
      </view>
    </view>
    <comm-beian></comm-beian>
    <comm-tabbar></comm-tabbar>
  </view>
</template>

<script>
  export default {
    name: "UcenterIndex",
    data() {
      return {};
    },

    methods: {
      toMenuLink(e) {
        if (!this.user || !this.user.username) {
          this.toLogin();
          return;
        }
        this.goTo(e);
      },

      toContact() {
        console.log("object");
        //打开外部链接
        window.open(this.$config.customerService, "_blank");
      },
    },
  };
</script>

<style lang="scss" scoped>
  .ucenter {
    &-header {
      position: relative;
      width: 100%;
      image {
        position: relative;
        z-index: 1;
        width: 750rpx;
        height: 500rpx;
      }

      &-container {
        position: absolute;
        top: 10%;
        left: 0;
        right: 0;
        bottom: 10%;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
      }
    }

    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 80rpx;
      background-color: #fff;
      border: 8rpx solid #fff;
      overflow: hidden;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
      image {
        width: 100%;
        height: 100%;
      }
    }

    .name {
      margin-top: 20rpx;
      padding: 10rpx 20rpx;
      background-color: rgba($color: #fff, $alpha: 0.85);
      border-radius: 30rpx;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
    }

    .vip-join-btn {
      margin-left: 10rpx;
      display: inline-block;
      background: $color-primary;
      color: #fff;
      font-size: 22rpx;
      padding: 6rpx 10rpx;
      border-radius: 30rpx;
      line-height: 1;
    }

    .statusbar {
      width: 80%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      padding: 10rpx 40rpx;
      background-color: rgba($color: #fff, $alpha: 0.85);
      border-radius: 10rpx;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
    }

    .statusbar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .vip-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: $border-radius;
      box-shadow: $box-shadow;
      padding: 20rpx;
      //渐变背景
      background: linear-gradient(to bottom, $color-primary, $color-secondary);
      color: #fff;
      &-icon {
        font-size: 60rpx;
      }
      &-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-left: 20rpx;
        flex: 1;
      }

      &-btn {
        background: rgba($color: #fff, $alpha: 0.9);
        color: $color-primary;
        font-size: 24rpx;
        padding: 10rpx 20rpx;
        border-radius: 30rpx;
        line-height: 1;
      }
    }

    &-menu {
      background: $color-white;
      padding: 20rpx;
      border-radius: $border-radius;
      box-shadow: $box-shadow;
      &-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100rpx;
        border-bottom: 1rpx solid #ddd;
        &:last-child {
          border-bottom: none;
        }

        .iconfont {
          color: $color-primary;
          margin-right: 5rpx;
        }
      }
    }
  }
</style>
